<template>
  <div class="sjs">
    <!-- 头部 -->
    <Myhead>设计师</Myhead>
    <ul class="nav">
      <li @click="showPopup" >筛选 <i class="iconfont icon-down"></i></li>
      <li>风格 <i class="iconfont icon-down"></i></li>
      <li>排序 <i class="iconfont icon-down"></i></li>
      <div class="search">
        <i class="iconfont icon-search"></i>
      </div>
    </ul>
    <div class="hr"></div>
    <div class="content">
      <ul>
        <li v-for="item in list" :key="item.id" @click="$router.push('/devSjsDetail')">
          <div class="Cleft">
            <img :src="item.img" alt="" />
          </div>
          <div class="Cright">
            <div class="Ctitle">
              <div>
                <span>{{ item.name }}</span>
                <span class="Cbtn">{{ item.level_name }}</span>
              </div>
              <div>
                <b style="color: #feb505">{{ item.rq }}</b> 人气
              </div>
            </div>
            <div class="Cname">
              <span
                >作品：<b style="color: #ccc; font-weight: normal"
                  >{{ item.zp }}个</b
                ></span
              ><span
                >经验：<b style="color: #ccc; font-weight: normal">5个</b>
              </span>
              <span
                >评价：<b style="color: #ccc; font-weight: normal">{{
                  item.pj
                }}</b></span
              >
            </div>
            <div class="Cstyle">
              <span>擅长风格:&emsp;</span>
              <span
                ><b style="color: #ccc; font-weight: normal">{{
                  item.style
                }}</b></span
              >
            </div>
          </div>
        </li>
      </ul>
    </div>
    <section class="page font-normal flex">
      <a href="" class="bg-white">上一页</a>
      <div>1/30</div>
      <a href="" class="bg-green">下一页</a>
    </section>
    <div class="foot-tips">
      <p>
        房先森互联网家装有别于传统装修公司与其他装修中介平台，以自营模式整合设计师与项目经理，利用互联网将工地进行在线全景直播，通过去中间环节，提供装修套餐
        + 个性化定制服务。
      </p>
    </div>
    <footer class="footer-nav">
      <p>
        <i class="iconfont icon-hot-line green"></i>
        <a href="">服务热线:17757169861</a>
      </p>
    </footer>
    <div class="show" v-if="show">
      <div class="top">
        <p>级别</p>
        <ul>
          <li>不限</li>
          <li>总监</li>
          <li>主任</li>
          <li>优秀</li>
        </ul>
          <p>收费</p>
        <ul>
          <li>不限</li>
          <li>0-50元/㎡</li>
          <li>50-100元/㎡</li>
          <li>100-150元/㎡</li>
          <li>200元/㎡以上</li>
        </ul>
      </div>
      <div class="bottom" @click="qr">
        确认
      </div>
    </div>
  </div>
</template>

<script>
import Myhead from "../components/Myhead.vue";
export default {
  data() {
    return {
      list: [], //存放设计师数据
      show:false
    };
  },
  created() {
    this.$http.get('/home/shejishi').then((res) => {
      console.log(res.data);
      this.list = res.data.list;
    });
  },
  mounted() {},
  methods: {
    showPopup(){
      this.show=true
    },
    qr(){
      this.show=false
    }
  },
  components: {
    Myhead,
  },
};
</script>

<style lang='scss' scoped>
.sjs{
  width: 100%;
  height: 1000px;
  position: relative;
  margin-bottom: 100px;
}
.mid {
  span {
    margin-top: 22px;
    display: inline-block;
    font-size: 20px;
  }
}
.nav {
  display: flex;
  width: 100%;
  height: 50px;
  line-height: 50px;
  padding: 0 20px;
  background-color: #fff;
  li {
    flex-basis: 25%;
    text-align: center;
    font-size: 18px;
  }
  .search {
    flex-basis: 25%;
    .icon-search {
      font-size: 26px;
      margin-left: 20px;
      color: #33c692;
    }
  }
}
.hr {
  height: 10px;
  background-color: #f4f4f4;
}
.content {
  ul {
    li {
      border-bottom: 1px solid #ccc;
      background-color: #fff;
      display: flex;
      height: 116px;
      .Cleft {
        flex-basis: 20%;
        padding: 18px 11px;
        img {
          width: 80px;
          height: 80px;
          border-radius: 50%;
        }
        div {
          width: 100%;
          height: 80px;
          border: 1px solid red;
        }
      }
      .Cright {
        flex-basis: 80%;
        padding: 20px 10px;
        .Ctitle {
          display: flex;
          justify-content: space-between;
          margin-bottom: 4px;
          .Cbtn {
            display: inline-block;
            font-size: 12px;
            border-radius: 4px;
            background: #2bb281;
            color: #fff;
            vertical-align: middle;
            margin-left: 4px;
            padding: 2px 4px;
          }
        }
        .Cname {
          display: flex;
          justify-content: space-between;
          margin-bottom: 10px;
        }
      }
    }
  }
}
.footerText {
  background-color: #fff;
}
.page.flex {
  width: 95%;
  height: 30px;
  line-height: 30px;
  font-size: 16px;
  display: flex;
  margin: 20px auto;
  background-color: #fff;
  .bg-white {
    background-color: #eaeaea;
  }
  div {
    width: 100px;
    text-align: center;
    color: black;
    background-color: #fff;
  }
}
.flex a,
.flex li {
  width: 100%;
  display: inline-block;
  flex: 1;
  text-align: center;
}
.bg-green {
  background: #39c894;
  color: #fff;
}
a {
  text-decoration: none;
}
.foot-tips {
  background: #fff;
}
.footer-nav  {
  padding: 0.3rem;
  margin-top: 0.3rem;
  background: #fff;
  font-size: 14px;
  text-align: center;
  color: #999;
}
.footer-nav p  {
  margin-bottom: 0.2rem;
}
.flex  {
  width: 100%;
  display: flex;
}
.flex a,
 .flex li  {
  width: 100%;
  display: inline-block;
  flex: 1;
  text-align: center;
}
.green  {
  color: #2bb281;
}

.footer-nav p.copyright  {
  margin-top: 0.3rem;
  padding-top: 0.3rem;
  border-top: 1px  solid #eaeaea;
}
.foot-tips  {
  padding: 3%;
  margin-bottom: 0;
  font-size: 14px;
  line-height: 1.6;
  text-indent: 1rem;
  color: #666;
}
.show{
  width: 100%;
  height: 1000px;
  background-color: rgba(0, 0, 0, 0.205);
  position: absolute;
  top: 110px;
  left: 0;
  .top{
    background-color: #f4f4f4;
    height: 310px;
    width: 100%;
    display: flex;
    flex-direction: column;
    p{
      font-size: 20px;
      height: 30px;
      line-height: 30px;
      padding-top: 10px;
      padding-left: 5px;
      padding-bottom: 20px;
    }
    ul{
      width: 100%;
      display: flex;
      flex-wrap: wrap;
      li{
        height: 30px;
        width: 125px;
        margin-bottom: 10px;
        color: #999;
        text-align: center;
        line-height: 30px;
        margin-left: 8px;
        border-radius: 6px;
        background-color: #ffffff;
      }
    }
  }
  .bottom{
    width: 100%;
    line-height: 40px;
    text-align: center;
    color: #fff;
    background-color: #39c893;
    // margin-top: 30px;
  }
}
</style>
